<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Document</title>
	<style>
		body{
			margin :0px;
			padding:0px; 
		}

		@media screen and (min-device-width:321px){
			header{
				background:red;
			}		

		}
		ul{
			margin: 0px;
			padding: 0px;
		}
	</style>
	<link rel="stylesheet" href="./css/category.css" />
	<script src="./js/jquery-3.2.1.min.js"></script>
</head>

<body>
	<header id = "">

	</header>
	<section id = "header_search_box">
		<a href="./index.v.php" id = "header_search_index"></a>
		<a href="#" id = "hsb_search_btn"></a>
		<a href="./shoppingCart.v.php" id = "hsb_search_cart"></a>
		<a href="./myOrchard.v.php" id = "hsb_search_psonCenter"></a>
	</section>

	<section id = "sec_body">
		
			<ul id = "secb_links">
<!-- 				<li><a href="#" id = "secb_links_1">新鲜水果</a></li>
				<li><a href="#" id = "secb_links_2">肉类禽蛋</a></li>
				<li><a href="#" id = "secb_links_3">蔬菜瓜果</a></li>
				<li><a href="#" id = "secb_links_4">水产海鲜</a></li>
				<li><a href="#" id = "secb_links_1">豪礼在手</a></li>
				<li><a href="#" id = "secb_links_2">鲜奶乳品</a></li>
				<li><a href="#" id = "secb_links_3">速食调料</a></li>
				<li><a href="#" id = "secb_links_4">格调人生</a></li>
				<li><a href="#" id = "secb_links_4">美颜享瘦</a></li> -->
			</ul>
		<div class="tab-content">	
			<ul id = "secb_goods">
				<div style="height: 10px;"></div>
<!-- 				<li>
					<a href="#">
						<img width = "70px" src="./images/be6333a086d6f13cda293ca8afa06c24.jpg" alt="">
						<span class = "good_name">亲戚长辈</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img width = "70px" src="./images/0d44e890f9ae4321817dce3d240bbe71.jpg" alt="">
						<span class = "good_name">职场友人</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img width = "70px" src="./images/eed39f84b39b954a335c9ff00e7ed445.jpg" alt="">
						<span class = "good_name">故友相约</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img width = "70px" src="./images/gengd.png" alt="">
						<span class = "good_name">全部</span>
					</a>
				</li> -->
			</ul>
		</div>
	</section>
	<footer id="category_footer">
		<p>
			下载果园App，立享专属优惠<br />
			天天到家，2小时闪电送达
		</p>
		<span id="app_btn">立刻体验</span>
		<span id="app_close"></span>
	</footer>

	<script>
		function init(){
			$.get('../api/jsCategoryApi.php',{act:'getAllCategory'},function(data){
				var tab=""
				for(var i in data){
					var row = data[i]
					tab+='<li onclick="showCategory('+row.id+')"><a>'+row.name+'</a></li>'
					if(i==0){
						showCategory(row.id)
					}
				}
				$('#secb_links').html(tab)
			},'json')
		}
		function showCategory(id){
			$.get('../api/jsCategoryApi.php',{act:'getCategory',id:id},function(data){
				var tab=""
				for(var i in data){
					var row = data[i]
					tab+='<li><a href="#"><img width = "67px" src="'+row.img+'" alt=""><span class = "good_name">'+row.name+'</span></a></li>'
				}
				$('#secb_goods').html(tab)
			},'json')
		}
		$(init)
	</script>
</body>
</html>